<template>
  <div>
    <div class="container-box">
      <div class="tableName">
        <p>通知公告</p>
    </div>
    <div class="table-search">
      <div class="input-list">
        <div class="input-box">
          <label for="">消息类型:</label><select name="" id="" class="sel-all" v-model="mesType" aria-placeholder="请输入">
              <option value="通知公告" class="sel-option">通知公告</option>
              <option value="待发布" class="sel-option">待办提醒</option>
              <option value="已发布">预警消息</option>
            </select>
        </div>
        <div class="input-box">
          <label for="">消息状态:</label><input type="text" placeholder="请输入">
        </div>
        <div class="input-box">
          <label for="">创建时间:</label><input type="text" placeholder="请输入">
        </div>
      </div>
      <div class="search-btn-box">
        <div class="search-btn">
          <button style="margin-right:10px;" @click="checkMes">查询</button>
          <button>重置</button>
        </div>
      </div>
    </div>
    <div class="notice-list">
      <div class="new">
        <div class="new-notice" @click="AllTask">全部标记为已读</div>
      </div>
       
      <div class="notice-list-box" >
        <el-table :data="table" style="width: 100%; color:13px;" border>
    <el-table-column label="序号" min-width="10%" style="color:#333;font-size:13px;" type="index">
      <!-- <template>
        <div style="display: flex; align-items: center;justify-content:center;">
          <span style="color:#797979; font-size:13px;text-align:center;"></span>
        </div>
      </template> -->
    </el-table-column>
    <el-table-column label="标题" min-width="30%" style="color:#333;font-size:13px;">
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content:center;">
          <span style="color:#797979; font-size:13px;text-align:center;">{{ scope.row.newsTitle }}</span>
        </div>
      </template>
    </el-table-column> <el-table-column label="消息类型" min-width="10%" height='' style="color:#333;font-size:13px;">
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content:center;">
          <span style="color:#797979; font-size:13px;text-align:center;">{{ scope.row.newsType}}</span>
        </div>
      </template>
    </el-table-column>
     <el-table-column label="创建日期" min-width="20%" style="color:#333;font-size:13px;">
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content:center;">
          <span style="color:#797979; font-size:13px;text-align:center;">{{parseTime(scope.row.createDate, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
        </div>
      </template>
    </el-table-column>
     <el-table-column label="状态" min-width="10%" style="color:#333;font-size:13px;">
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content:center;">
         <span style="color:#797979; font-size:13px;text-align:center;">{{ scope.row.newsStatus?'已读':'未读' }}</span>
        </div>
      </template>
    </el-table-column>
    
    <el-table-column label="操作" min-width="20%">
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content:center;">
          <span style="color:#797979; font-size:13px;text-align:center;color: #409EFF;cursor: pointer;" @click="detailCenter(scope.row.newsId)">{{ scope.er }}详情</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
      </div>
      <div class="table-footer">
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[15, 20, 25, 30]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total,  prev, pager, next,sizes, jumper"
                :total="table.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
    </div>
   
    </div>
    
  </div>
</template>

<script>
import {computed, defineComponent, onMounted, reactive, toRefs,ref} from 'vue'
import { parseTime } from "@/util/date";
import axios from '@/util/http'
export default defineComponent({
    name:'notice',
    setup(){
      const tableData= [
  {
    date: '1',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '2',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '3',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '4',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '5',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '6',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '7',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '8',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '9',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  {
    date: '10',
    name: '您好，张晓雅经核实转居家医学观察，请密切跟踪关注！',
    address: '待办提醒',
    time:'2021-08-01 15：00',
    status:'已读',
    play:['详情']
  },
  
]
let mesType = ref('')
//分页
let currentPage=ref(1);
    let pageSize=ref(6);
     let totalData= ref();
           let background=ref(true)
let Table =reactive({
  table:[]
})
      onMounted(async()=>{
       await axios({method:'post',url:'district_sys_news/findnews',params:{currentPage:currentPage.value,pageSize:pageSize.value}}).then((res)=>{
          Table.table = res.data.data.newsList
          Table.table.forEach(element => {
            element.createDate
          });
        })
      })
const checkMes = async()=>{
  await axios({
    method:'post',
    path:'district_sys_news/findnewsbyconditions',
    params:{
      currentPage:currentPage.value,
      pageSize:pageSize.value,
      newsType:'通知公告'
    }
  }).then((res)=>{
  })
      }
  const AllTask =async ()=>{
    await axios({
      method:'post',
      path:'district_sys_news/allmarkasread'
    }).then((res)=>{
    })
  }
  const handleSizeChange = async()=>{
    console.log(pageSize)
    await axios({method:'post',url:'district_sys_news/findnews',params:{currentPage:currentPage.value,pageSize:pageSize.value}}).then((res)=>{
          Table.table = res.data.data.newsList
          Table.table.forEach(element => {
            element.createDate
          });
        })
  }
  const handleCurrentChange = async()=>{
    console.log(currentPage)
    await axios({method:'post',url:'district_sys_news/findnews',params:{currentPage:currentPage.value,pageSize:pageSize.value}}).then((res)=>{
          Table.table = res.data.data.newsList
          Table.table.forEach(element => {
            element.createDate
          });
        })
  }
  const detailCenter = (id)=>{
    router.push(`/cha?id=${id}`)
  }
      

return{
  ...toRefs(Table),
  tableData,
  parseTime,
  checkMes,
  mesType,
  AllTask,
  handleCurrentChange,
  handleSizeChange,
  detailCenter
}
    }
    
})
</script>

<style scoped lang='less'>
.sel-all{
  box-sizing: border-box;
  width: 232px;
  height: 40px;
  padding: 2px 2px 2px 10px;
  font-family: '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: rgb(204, 204, 204);
  border-width: 1px;
  outline-color: rgb(204, 204, 204);
  border-radius: 5px;
}
.pagination {
        text-align: center;
        button {
            margin: 0 5px;
            background-color: #f4f4f5;
            color: #606266;
            outline: none;
            border-radius: 2px;
            padding: 0 4px;
            vertical-align: top;
            display: inline-block;
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            border: 0;

            &[disabled] {
                color: #c0c4cc;
                cursor: not-allowed;
            }

            &.active {
                background-color: #409eff;
                color: #fff;
            }
        }
    }
th{
  font-size: 13px !important;
    color: #333 !important;
    font-weight: normal !important;
}
td{
  height: 54px;
  box-sizing: border-box;
}
.container-box{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color:#f5f5f5;
  color: #333;
  font-size: 13px;
}
.tableName{
  height: 45px;
  box-sizing: border-box;
}

.table-search{
  box-sizing: border-box;
  padding: 0px 40px;
    border-width: 0px;
    /* position: absolute;
    left: 0px;
    top: 0px; */
    width: 100%;
    height: 140px;
    background: inherit;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Microsoft Tai Le Regular', 'Microsoft Tai Le', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #666666;
    text-align: left;
    line-height: 18px;
}
.notice-list{
  box-sizing: border-box;
  padding: 20px 10px;
  margin-top: 10px;
  border-width: 0px;
    /* position: absolute;
    left: 0px;
    top: 0px; */
    width: 100%;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Microsoft Tai Le Regular', 'Microsoft Tai Le', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #666666;
    text-align: left;
    line-height: 18px;
}
input{
  box-sizing: border-box;
  width: 232px;
    height: 40px;
    padding: 2px 2px 2px 10px;
    font-family: '微软雅黑', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    letter-spacing: normal;
    color: #CCCCCC;
    text-align: left;
    text-transform: none;
    background-color: transparent;
    border-color: rgb(204,204,204);
    border-width: 1px;
    outline-color: rgb(204,204,204);
    border-radius: 5px;
}
.input-list{
  display: flex;
}
.input-box{
  box-sizing: border-box;
  padding-top: 20px;
  width: 330px;

}
label{
  color: #333;
  font-size: 13px;
  padding-right: 10px;
}
.search-btn-box{
  height: 100px;
}
.search-btn{
  box-sizing: border-box;
  padding-top:20px ;
  display: flex;
}
.search-btn button{
  width: 92px;
  height: 40px;
  outline: none;
  border: 1px solid rgb(215,215,215);
  border-radius: 5px;
}
.new{
  height: 80px;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
}
.new-notice {
  text-align: center;
  width: 150px;
  height: 40px;
  background-color: rgb(64,158,255);
  border-radius: 5px;
}
/deep/ .el-table thead {
    color: #333 !important;
    font-weight: normal !important;
}
/deep/ .el-table .cell {
    padding: 0px;
    height:46px ;
    line-height: 54px;
    font-size: 13px;
    color: #333 !important;
    font-weight: normal !important;
    text-align: center;
}
/deep/.el-table .el-table__cell {
    padding: 0px;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    z-index: 1;
}
.table-footer {
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

</style>